<template>
	<view class="pagesbg">
		<!-- 头部 -->
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-goBack" @tap.stop="$tools.back(1)"></view>
				<view class="header-title">{{title}}</view>
			</view> 
		</view> 
		
		<view class="balance">
			<view class="balance-top">
				<view class="integral">
					<view class="integral-list">
						<view class="integral-list__item">
							<view class="info">{{title}}</view>
							<view class="number">{{ jia(userMoney.validNum4,userMoney.validNum5) || 0}}</view>
							<!-- <view class="btnBox" v-if="coinType==4">
								<view class="btn" @tap.stop="unLock()">解锁</view>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="item">
						<view class="txt">贡献金</view>
						<view class="num">{{ userMoney.validNum5 || 0 }}</view>
					</view>
					<view class="item" >
						<view class="txt">贡献值</view>
						<view class="num">{{ userMoney.validNum4 || 0 }}</view>
					</view>
					<!-- <view class="item" @tap.stop="$tools.jump('./balanceRecord1',5,'锁定消费券')">
						<view class="txt"> 锁定消费券<image class="ico" src="@/static/public/icon-next-back.png" mode=""></image></view>
						<view class="num">{{ userMoney.validNum5 ? userMoney.validNum5 : 0 }}</view>
					</view> -->
				</view>
			<view class="record">
				<!-- <view class="sort">
					<picker mode="date" :value="date" fields="month" @change="bindDateChange">
						<view class="uni-input">{{dateShow}}</view>
					</picker>
					<image class="ico" src="@/static/public/icon-down.png" mode=""></image>
				</view> -->
				<view class="tab">
					<view :class="['item',currIndex==0?'active':'']" @tap.stop="changeTab(0,1)">收入</view>
					<view :class="['item',currIndex==1?'active':'']" @tap.stop="changeTab(1,-1)">支出</view>
				</view>
			<view class="record-wrapper" v-if="isShowPage">
				<scroll-view scroll-y="true" class="record-height" 
				v-if="recordsList.length != 0"
				@scrolltolower="lower()">
					<view class="record-item record-bg" v-for="(item,index) in recordsList" :key="index"
					>
						<view class="record-left">
						<view class="record-title">{{ getSourceType(item.sourceType) }}</view>
						</view>
						<view class="record-right">
							<view class="record-num">{{ item.changeBalance }} <text class="record-time">{{ item.coinType==4?'贡献值':item.coinType==5?'贡献金':'' }}</text></view>
							<view class="record-time record-time--nowrap">{{ item.createTime }}</view>
						</view>
					</view>
				</scroll-view>
				<view class="initNoData" v-if="recordsList.length == 0">暂无记录</view>
			</view>
		</view>
		</view>
		<!-- 播放弹窗 -->
	<uni-popup class="modal-bg" ref="psdPopup" type="center" :animation="true" @change="changePopup($event,'psdPopup')">
		<view class="modal">	
			<view class="video-box">
				<view class="txt" v-if="remainingTime>0"> {{ remainingTime }} </view>
				<image class="close" v-if="showClose" @tap.stop="closeVideo()" src="@/static/public/close.png" mode="heightFix"></image>
				<video
					class="video"
					id="myVideo"
					:src="videoSrc"
					:controls="false"
					show-fullscreen-btn
					playsinline
					x5-playsinline
					x5-video-player-type="h5"
					x5-video-player-fullscreen="true"
					@play="onPlay"
					@timeupdate="onTimeUpdate"
					@ended="onVideoEnded"
				></video>
			</view>
		</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				isShowPage: false,
				pages: 1,
				pageIndex: 1,
				pageSize: 20,
				recordsList: [],
				coinType:4,
				title:'',
				coninTypeArr:[
					{type:1,name:'余额'},
					{type:2,name:'兑换消费券'},
					{type:3,name:'消费券'},
					{type:4,name:'贡献值'},
					{type:5,name:'锁定消费券'},
					{type:6,name:'分红消费券'},
				],
				dateShow:'',
				date:'',
				userMoney: {},
				currIndex:0,
				rax:1,
				totalPoint:0,
				isRead:0, // 是否已看,0-未看，2-已看
				videoSrc:'',
				totalDuration: 0, // 视频总时长（秒）
				currentTime: 0, // 当前播放时长（秒）
				remainingTime: 0, // 格式化后的剩余时间
				showClose:false,
			}
		},
		computed:{
			// 1.充值 2.提现 3.分享释放积分4.礼包直推收益 5.购买商品 6.提现失败退款 7.月释放积分 8.赠送锁仓消费券 9.分红达标奖励 10.收货赠送消费券
//  * 11.周释放积分 12.分红直推收益 13.绩效奖 14.免单释放 15.购买礼包 99-系统修改
			getSourceType(){
				return function(type){
					switch (type){
						case 1:
							return '充值';
							break;
						case 2:
							return '提现';
							break;
						case 3:
							return '分享释放积分';
							break;
						case 4:
							return '礼包直推收益';
							break;
						case 5:
							return '购买商品';
							break;
						case 6:
							return '提现失败退款';
							break;
						case 7:
							return '月释放积分';
							break;
						case 8:
							return '赠送积分';
							break;
						case 9:
							return '分红达标奖励';
							break;
						case 10:
							return '收货赠送积分';
							break;
						case 11:
							return '周释放积分';
							break;
						case 12:
							return '分红直推收益';
							break;
						case 13:
							return '绩效奖';
							break;
						case 14:
							return '免单释放';
							break;
						case 15:
							return '购买礼包';
							break;
						case 16:
							return '贡献值释放';
							break;
						// case 17:
						// 	return '系统间转账';
						// 	break;
						// case 18:
						// 	return '兑换';
						// 	break;
						case 99:
							return '系统修改';
							break;
						// case 19:
						// 	return '';
						// 	break;
						// case 20:
						// 	return '';
						// 	break;
						// case 21:
						// 	return '';
						// 	break;
					}
				}
			},
		},
		onLoad(options) {
			if(options){
				this.coinType = options.value1
				this.title = options.value2
			}
		},
		onShow() {
			this.init();
			// if(this.coinType==3){
			// 	this.getTotal()
			// }
		},
		onReachBottom() {
			console.log("ddd");
			if (this.pageIndex >= this.pages) {
				return this.$tools.toast('到底了');
			} else {
				this.pageIndex++;
				console.log("+++")
				this.getRecord();
			}
		},
		methods: {
			getCoinType(){
				const type = this.coinType
				const typeName = this.coninTypeArr.filter(item=>item.type == type)[0].name
				console.log('typeName',typeName)
				return typeName;
			},
			init(){
				this.isShowPage = false;
				this.pages = 1;
				this.pageIndex = 1;
				this.recordsList = [];
				this.getRecord();
				this.getUserMoney();
				this.getVideoList();
				this.getVideoProfitSize()
			},
			// 记录
			getRecord(){
				let arr=[4,5]
				const coinType=arr.join(',')
				var data = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					coinType:coinType,
					sourceType:'',
					// month:this.date,
					rax:this.rax
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/money/getUserMoneyLogList2',data, res => {
						if(res.code == 200){
							this.isShowPage = true;
							this.pages = res.data.pages;
							this.recordsList = this.recordsList.concat(res.data.list);
							uni.hideLoading();
						}
					}, err => {
						uni.hideLoading();
					}, 'GET'
				);
			},
			// 获取累计消费券
			getTotal(){
				const data={
					coinType:3
				}
				this.$Ajax('/api/money/logStatistics',data, res => {
						if(res.code == 200){
							this.totalPoint = res.data;
						}
					}, err => {
						uni.hideLoading();
					}, 'GET'
				);
			},
			changeTab(index,type){
				if(this.currIndex !=index){
					this.currIndex = index
					this.rax = type
					this.init()
				}
			},
			bindDateChange(e){
				const time = (e.detail.value).split('-')
				console.log(e,time)
				this.date = e.detail.value +'-01'
				this.dateShow = time[0]+'年'+time[1]+'月'
				this.init()
			},
			// 解锁
			unLock(){
				console.log('isRead',this.isRead)
				if(!this.isRead){
					this.openPopup('psdPopup');
					this.remainingTime =0;
					this.showClose=false
				}else{
					this.$tools.toast('今日已解锁，请明日再来')
				}
			},
			// 视频是否已看
			getVideoProfitSize(){
				var data = {
				};
				this.$Ajax('/api/money/getVideoProfitSize',data,res => {
					this.isShowPage = true;
						if (res.code == 200) {
							this.isRead = res.data
						}
					}, err =>{
					}, 'GET'
				)
			},
			// 获取视频
			getVideoList(){
				var data = {
				};
				this.$Ajax('/api/money/getVideoList',data,res => {
					this.isShowPage = true;
						if (res.code == 200) {
							this.videoSrc = res.data?res.data[0].img:''
						}
					}, err =>{
					}, 'GET'
				)
			},
			// 暂停开始
			onPlay(event) {
				// 当视频播放时触发
				this.currentTime = event.detail.currentTime;
				// #ifdef APP-PLUS
				// 当视频播放时，自动进入全屏
				plus.screen.lockOrientation("landscape-primary"); // 锁定横屏
				// 设置全屏
				plus.navigator.setFullscreen(true);
				// #endif
			},
			// 播放中
			onTimeUpdate(event) {
      // 当视频的播放时间发生更新时触发
			// console.log('currentTime',event.detail.currentTime)
      // this.currentTime =parseInt(event.detail.currentTime);
			// 获取视频总时长（秒）
      if (!this.totalDuration) {
        this.totalDuration = parseInt(event.detail.duration);
      }
			// console.log('totalDuration',this.totalDuration,',currentTime',event.detail.currentTime)
      // 更新当前播放时长（秒）
      this.currentTime = parseInt(event.detail.currentTime);
      // // 计算剩余时间并格式化
      let remainingSeconds = Math.max(this.totalDuration - this.currentTime, 0);
			this.remainingTime = parseInt(remainingSeconds)
      // let hours = Math.floor(remainingSeconds / 3600);
      // let minutes = Math.floor((remainingSeconds % 3600) / 60);
      // let seconds = parseInt(remainingSeconds % 60);
      // this.remainingTime = (hours ? hours + ':' : '') + (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
    	},
		// 播放完成
			onVideoEnded() {
				// 视频播放完毕后的逻辑
				console.log('视频播放已结束');
				// 这里可以关闭视频或执行其他操作
				this.showClose = true
				this.closeVideo()
			},
			// 播放完成关闭传后台
			closeVideo(){
				this.hidePopup('psdPopup')
				var data = {};
				this.$Ajax('/api/money/viewVideoProfit',data,res => {
						if (res.code == 200) {
							this.$tools.toast('视频已看完')
							this.getVideoProfitSize()
						}
					}, err =>{
					}
				)
			},
			/* 弹出框公用 */
			openPopup(e, item) {
				this.popupInfo = item;
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				console.log('popup ' + e.type + ' 状态', e.show);
			},
		}
	}
</script>

<style lang="scss" scoped>
.balance{
	&-top{
			background: url('@/static/public/balanceBg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin: 20rpx 30rpx 0;
			.asset{
				@include flexCenterColumn;
				.title{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
				}
				.num{
					font-family: DIN, DIN;
					font-weight: 700;
					font-size: 48rpx;
					color: #FFFFFF;
					margin: 22rpx 0;
				}
			}
			.integral{
				&-list{
					@include flexBetween;
					&__item{
						@include flexLeftColumn;
						height: 235rpx;
						padding: 40rpx;
						width: 100%;
						.info{
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #FFFFFF;
						}
						.number{
							font-family: DIN, DIN;
							font-weight: 700;
							font-size: 44rpx;
							color: #FFFFFF;
							margin-top: 20rpx;
						}
						.btnBox{
							@include flexBetween;
							margin-top: 20rpx;
							.btn{
								height: 58rpx;
								line-height: 58rpx;
								background: #FFFFFF;
								border-radius: 84rpx;
								font-size: 28rpx;
								color: #EE3A33;
								padding: 0 40rpx;
								margin-right: 16rpx;
							}
						}
					}
					.line{
						width: 0rpx;
						height: 66rpx;
						border: 2rpx solid rgba(255,255,255,0.41);
					}
				}
			}
		}
}
.tab{
	margin-top: 24rpx;
	height: 96rpx;
	background: #fff;
	@include flexBetween;
	.item{
		width: 50%;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		font-size: 32rpx;
		color: #666666;
		position: relative;
	}
	.active{
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
	}
	.active::after{
		content: '';
		display: block;
		width: 80rpx;
		height: 8rpx;
		background: #AD2926;
		border-radius: 70rpx;
		position: absolute;
		bottom: 0;
		left: calc(50% - 40rpx);
	}
}
.content{
	@include flexLeft;
	margin: 20rpx 30rpx 0;
	.item{
		width: calc((100% - 20rpx) / 2);
		margin-left: 10rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 0 24rpx;
		text-align: center;
		height: 162rpx;
		@include flexCenterColumn;
		.txt{
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			// line-height: 30rpx;
			@include flexCenter;
		}
		.num{
			font-weight: 500;
			font-size: 32rpx;
			color: #EE3A33;
			// line-height: 44rpx;
			margin-top: 24rpx;
		}
		.ico{
			width: 32rpx;
			height: 32rpx;
			margin-left: 5rpx;
		}
	}
	.item:nth-of-type(1){
		margin-left: 0;
	}
}
	.record{
		.sort{
			background: #FFFFFF;
			box-shadow: none;
			margin:  24rpx;
			padding: 36rpx 32rpx;
			@include flexLeft;
			.ico{
				width: 32rpx;
				height: 32rpx;
			}
		}
		&-wrapper{
			margin-top:  24rpx;
			padding: 36rpx 32rpx;
			background: #FFFFFF;
			box-shadow: none;
			// border-radius: 16rpx;
		}
		&-bg{
			box-shadow: none;
		}
		&-item{
			
		}
		&-text{
			margin-top: 36rpx;
		}
		&-status{
			margin-top: 22rpx;
		}
		&-timeBox{
			margin: 30rpx 20rpx 0;
			padding: 0rpx 0 28rpx;
		}
	}	
	// 视频播放弹窗
.modal-bg{
	width: 100%;
	height: 100%;
	background: rgba($color: #000000, $alpha: 0.5);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;
	overflow: hidden;
}
.modal,/deep/ .uni-popup__wrapper-box{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.video-box{
	width: 100%;
	height: 100%;
	background: #000;
	padding: 20rpx;
	padding-top: 60rpx;
	position: relative;
	overflow: hidden;
	.txt{
		font-size: 14px;
		color: #fff;
		background: rgba(95, 84, 84 , 0.6);
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 100%;
		// z-index: 999999;
		// position: absolute;
		// top: 80rpx;
		// left: 20rpx;
	}
	.close{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 80rpx;
		right: 20rpx;
	}
	.video{
		width: 100%;
		height: 100%;
		margin-top: 0rpx;
	}
}
</style>